<template>
    <div class="adderss-box">
        <!-- 使用van-list -->
       <van-list :finished="finished"   @load="listRoll" :offset="offset" :immediate-check="isCheck"           >
            <!-- 地址列表 -->
            <div class="list" v-for="(item,index) in data" :key="index">
                <!-- 左 -->
                <div class="left" >
                    <!-- <i :class="{active:index ==checked}"></i> -->
                    <input class="checkbox" type="checkbox" :id="item.id" @click="selected(item,index)">
                </div>
                <!-- middle -->
                <div class="middle">
                    <img :src="item.head_img" alt="">
                </div>
                <!-- right -->
                <dl class="right">
                    <dt>{{item.title}}</dt>
                    <dd>￥{{item.price}}
                        <div class="btn-box">
                            <img @click="minus(1,index)" v-show="item.start<=1" class="jian" src="http://img.xianyufanshen.net//goods/images/shuliang_jian1@2x.png" alt="">
                            <img @click="minus(2,index)" v-show="item.start>1" class="jian" src="http://img.xianyufanshen.net//goods/images/shuliang_jian2@2x.png" alt="">
                            <p>{{item.start}}</p>
                            <img @click="add(1,index)" v-if="item.num<=1 ||item.start == item.num" class="jia" src="http://img.xianyufanshen.net//goods/images/shuliang_jia1@2x.png" alt="">
                            <img @click="add(2,index)" v-else class="jia" src="http://img.xianyufanshen.net//goods/images/shuliang_jia2@2x.png" alt="">
                        </div>
                    </dd>
                </dl>
            </div>
        </van-list>
        <div v-if="lang=='zh' ">
            <div class="nolist" v-if="finished && dataLength !=0">没有更多数据</div>
            <div class="nolist" v-if="dataLength==0">您还没有相关的订单</div>
        </div>
        <div v-else>
            <div class="nolist" v-if="finished && dataLength !=0">no more</div>
            <div class="nolist" v-if="dataLength==0">no data</div>
        </div>
        <!-- 操作按钮 -->
        <div class="btn" v-if="dataLength>0"> <i v-if="lang=='zh' " >已选总金额：</i> <i v-else>Total price：</i> 
            <span> ￥{{totalPrice}}</span>
            <div v-if="lang=='zh' " class="confirm" @click="confirm">确认选择</div>
            <div v-else class="confirm" @click="confirm">Confirm selection</div>
        </div>
        
        <!-- loading -->
        <div class="loading-box" v-show="loading">
             <van-loading type="spinner" color="white" />
        </div>
    </div>
</template>
<script>
import {getCollectionList} from '@/api/my/collection'
import { Loading,Dialog  ,Toast,List,} from 'vant';

export default {
    name:'Select',
    components:{
        [Dialog .name]: Dialog ,
        [List .name]: List ,
        [Loading .name]: Loading ,
    },
    data (){
        return{
           lang:'zh',//当前网页语言类型 zh 中文  en 英语    
           pageIndex:1,//
           pageSize:10,
           id:0,//订单id 
           userId:0,//用户id 
           checked:0,//当前选中的地址项
           offset:50,//多大距离触发滚动
           finished: false,//是否加载完整
           data:[],//藏品数据
           dataLength:0,//数据data长度
           selectedData:[],//选中的数据
           isCheck:false,//是否一开始检查滚动
           loading:false,//loading 
        }
    },
    computed:{
        //选择藏品总价
        totalPrice:function(){
           let totalPrice = 0;
            //    debugger;
           for(let i=0;i<this.selectedData.length;i++){
               let price = 0;
               let idx = this.selectedData[i].idx;
               //选中的计算
               price = parseFloat(parseFloat(this.data[idx].price)*parseFloat(this.data[idx].start));
               totalPrice = totalPrice + price;
           }
            return totalPrice.toFixed(2);//保留2位小数
        }
       
    },
    //实例创建完成后被立即调用
    created (){
        //获得语言类型lang
        if(this.$route.query.lang) {
            this.lang = this.$route.query.lang;
        }
        this.id = this.$route.query.id;
        //获取用户id
        if(this.$route.query.userId && this.$route.query.userId > 0){
            this.userId = this.$route.query.userId;
            this.getMyCollect();
             //把用户id存储在缓存
             window.localStorage.setItem("userId",this.userId);
        }else{
            this.userId = window.localStorage.getItem("userId");
        }
         //清空缓存
        window.localStorage.setItem("selectedData",'');
    },
    //
    methods:{
        //获得我的藏品数据
        getMyCollect(){
            getCollectionList(this.userId,this.pageIndex,this.pageSize,this.lang).then(res => {
                console.log(res);
                if(res.code == 200){
                   let data = res.data.list;
                   let newAry = [];//重组数据
                   data.forEach(element => {
                       if(element.state == 2){//审核通过的
                            let obj = {};
                            obj.id = element.id;
                            obj.title = element.title;
                            obj.head_img = element.head_img;
                            obj.price = element.price;
                            obj.num = element.stock;
                            obj.state = element.state;
                            obj.create_time = element.create_time;
                            obj.is_identified = element.is_identified;
                            obj.start = 1;//起始数据都是1
                            newAry.push(obj);
                        }
                   });
                    //判断有没有数据了
                    if(newAry.length>0){//有数据
                        this.data = this.data.concat(newAry);
                        this.loading = false;
                    }else{//没有数据
                        this.finished = true;
                        this.loading = false;
                    }
                    // console.log(this.data); 
                    this.dataLength = this.data.length; 
                    this.load = false;
                    }
            });
        },
        //滚动加载数据
        listRoll() {
            let _this = this;
            _this.pageIndex++;
             this.getMyCollect();
        }, 
        //选择藏品
        selected(item,index){
            console.log(item);
            let obj = {};
            obj.id = item.id;
            obj.idx = index;
            obj.head_img = item.head_img;
            obj.price = item.price;
            obj.title = item.title;
            // debugger;
            //判断有无数据
            if(this.selectedData.length > 0 ){//有数据 需要判断当前项 是否选中
                let flag = false;//标记有没有找到
                for(let i=0;i<this.selectedData.length;i++){
                    if(this.selectedData[i].idx == index ){
                        flag = true;
                        this.selectedData.splice(i,1);
                        //  break; 
                    }
                   
                }
                if(!flag){
                  this.selectedData.push(obj);
                }
                
            }else{
                this.selectedData.push(obj);
            }   
          
            // console.log(this.selectedData);
        },
        //数量增加
        add(type,idx){
            if(type == 1){//库存只有1个
                if(this.lang == 'zh'){
                    Toast("库存不足！");
                }else{
                    Toast("Not enough!"); 
                }
              
            }else{
                this.data[idx].start++;
            }
        },
        //数量减少
        minus(type,idx){
            if(type == 1){//不能少于1个
                 if(this.lang == 'zh'){
                    Toast("不能少于1个");
                 }else{
                    Toast("Not less than 1!"); 
                 }
            }else{
                this.data[idx].start--;
            }
            
        },
        //确认选择
        confirm(){
            let _this = this;
            if(this.selectedData.length <= 0){
                 if(this.lang == 'zh'){
                    Toast("请选择您要换出的藏品！");
                 }else{
                    Toast("Please choose first！");
                 }    
            }else{
                let newAry = [];
                for(let i=0;i<this.selectedData.length;i++){
                    let obj = {};
                    let idx = this.selectedData[i].idx
                    obj.idx = idx;
                    obj.id = this.data[idx].id;
                    obj.num = this.data[idx].start;
                    obj.head_img = this.data[idx].head_img;
                    obj.price = this.data[idx].price;
                    obj.title = this.data[idx].title;
                    newAry.push(obj);
                }
                this.selectedData = newAry;
                //存在缓存中
                window.localStorage.setItem("selectedData", JSON.stringify(this.selectedData));
                console.log(this.selectedData);
                
                //跳转到置换页面
                // this.$router.push({path: '/subBuy', query: {id:this.id,orderType:2,lang:this.lang,userId:this.userId,isSelected:true,}});
                let para = {};
                if(this.lang == 'zh'){
                    para.title = "提交信息"
                }else{
                    para.title = "Submit Information"
                }
                para.url = "/subBuy?lang="+this.lang+"&userId="+this.userId+"&id="+this.id+"&orderType=2"+"&isSelected=true";
                setTimeout(function(){
                    _this.interaction.hLink(para);
                },1000);
                
            }
        }
    }
    
}
</script>

<style lang="stylus" scoped>
.adderss-box{
  .list{
      padding :.266667rem 2.66%;
      background :#fff;
      border-bottom: 1px solid #f1f1f1;
      overflow:hidden;
      .left{
            float:left;
            width :6.6%;
            height:2.133333rem;
            position:relative;
            i{
                width:.426667rem;
                height:.426667rem;
                background :url("http://img.xianyufanshen.net//address/image/weixuanzhong_dizhi@2x.png") no-repeat;
                background-size :100%;
                position:absolute; 
                top:50%;
                left :0;
                margin-top:-.213333rem;
                &.active{
                    background :url("http://img.xianyufanshen.net//address/image/xuanzhong_dizhi@2x.png") no-repeat;
                    background-size :100%;
                }
            }
            input.checkbox{
                -webkit-appearance: none;
                width:16px;
                height:16px;
                background :url("http://img.xianyufanshen.net//address/image/weixuanzhong_dizhi@2x.png") no-repeat;
                background-size :100%;
                position:absolute; 
                top:50%;
                left :0;
                margin-top:-8px;
                &:checked{
                    background :url("http://img.xianyufanshen.net//address/image/xuanzhong_dizhi@2x.png") no-repeat;
                    background-size :100% ;
                }
            }
      }
      .middle{
          width:2.133333rem;
          height:2.133333rem;
          float:left;
          margin-right :3.3%
          img{
              width :100%;
              height :100%;
          }
      }
      dl{
        font-family:PingFangSC-Medium;
        font-size:.373333rem;
        color:#494949;
        height:2.133333rem;
        line-height :.533333rem;
        float:left;
        position:relative;
        width :65%;
        dt{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }
        dd{
            font-family:PingFangSC-Regular;
            font-size:.32rem;
            color:#9b9b9b;
            position:absolute;
            bottom :0;
            width :100%;
            .btn-box{
                float :right;
                width :1.76rem;
                height :.4rem;
                .jian{
                    float:left;
                    height :.4rem;
                    width : .4rem;
                }
                p{
                    float:left;
                    height :.4rem;
                    width :.96rem;
                    text-align :center;
                    line-height :.4rem;
                }
                .jia{
                    float:left;
                    height :.4rem;
                    width : .4rem;
                   
                }
                
            }
        }
      }
  }
  .btn{
    font-family:PingFangSC-Medium;
    font-size:.373333rem;
    color:#42403b;
    width :100%;
    box-sizing :border-box;
    letter-spacing:.005067rem;
    text-align:left;
    background:#ffffff;
    position:fixed;
    bottom:0;
    height:1.306667rem;
    line-height :1.306667rem;
    padding-left :.4rem;
    span{
        color:#cb9c57;
        letter-spacing:.006667rem;
        line-height:.533333rem;
    }
    .confirm{
        background:#cb9c57;
        width:4rem;
        height:1.306667rem;
       line-height :1.306667rem; 
       text-align :center;
       font-family:PingFangSC-Medium;
        font-size:.426667rem;
        color:#ffffff;
        letter-spacing:0.29px;
        position :absolute;
        right :0;
        top:0;
    }
   
  }
}
</style>



